<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直状态感知测试</title>
    <link rel="stylesheet" href="css/fullpage.css">
    <link rel="stylesheet" href="css/circle.css">
    <!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
</head>
<body>
    <div id="fullpage">
        <!-- 第一屏 -->
        <div class="section section1">
            <div class="title-box">
                <h1>按下暂停键，记录度数</h1>
                <h1>-10°到10°测试</h1>
            </div>
                <img src="./circle.jpg" alt="未找到图像" class="ball balla">
                <div>
                    <input type="button" value="暂停" class="btn1 btn">
                    <div class="text1 text">0°</div>
                </div>
                
        </div>
        <!-- 第二屏 -->
        <div class="section section2">
            <div class="title-box">
                <h1>按下暂停键，记录度数</h1>
                <h1>-15°到15°测试</h1>
            </div>
                <img src="./circle.jpg" alt="未找到图像" class="ballb ball">
                <div>
                    <input type="button" value="暂停" class="btn2 btn">
                    <div class="text2 text">0°</div>
                </div>
        </div>
        
        <!-- 第三屏 -->
        <div class="section section3">
            <div class="title-box">
                <h1>按下暂停键，记录度数</h1>
                <h1>-20°到20°测试</h1>
            </div>
                <img src="./circle.jpg" alt="未找到图像" class="ballc ball">
                <div>
                    <input type="button" value="暂停" class="btn3 btn">
                    <div class="text3 text">0°</div>
                </div>
        </div>
    </div>
        <!--	必须先引入jquery.min.js 再引入fullpage.js-->
	<script src="js/jquery.min.js"></script>
	<script src="js/fullpage.js"></script>
<!--	必须放到这里-->
<script>
    var starttime = new Date().getTime();
	$(function() {
		$('#fullpage').fullpage({
			'navigation':true,
		//滚动到当前屏幕，文字模块渐渐显示出来
			afterLoad:function () {
				$(this).find('.word-content').fadeIn();
			},
		//离开当前页面，文字模块渐渐淡出
			onLeave: function () {
				$(this).find('.word-content').fadeOut();
			},
		});
	});
    $('.btn1').click(function stop(){
        let endtime = new Date().getTime();
        let t = (endtime-starttime)/1000;
        let t1 = t%20-10;
        $('.text1').text(t1.toFixed(2)+'°');
    });
    $('.btn2').click(function stop(){
        let endtime = new Date().getTime();
        let t = (endtime-starttime)/1000;
        let t1 = t%30-15;
        $('.text2').text(t1.toFixed(2)+'°');
    });
    $('.btn3').click(function stop(){
        let endtime = new Date().getTime();
        let t = (endtime-starttime)/1000;
        let t1 = t%40-20;
        $('.text3').text(t1.toFixed(2)+'°');
    });

</script>
</body>
</html>